<template>
  <div>
    <ul>
      <li v-for="(list, index) in res" :key="index" @click="tododetail(list)">
          <img :src="list.goodsImg" />
          <div>
            <p>{{ list.goodsName }}</p>
            <span>￥{{ list.goodsPrice }}</span>
          </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "newReleases",
  data() {
    return {
      res: [],
    };
  },
  created() {
    axios({
      url: "/List",
      method: "get",
    }).then((res) => {
      this.res = res.data;
      // console.log(res.data);
    });
  },
  methods:{
    tododetail(list){
      this.$router.push({path:"/detail",query:{obj:JSON.stringify(list)}})
    }
  }
};
</script>

<style scoped>
ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul > li {
  width: 48%;
  height: 2.25rem;
  margin-bottom: 0.125rem;
}
ul > li img {
  width: 100%;
  height: 80%;
}
div {
  width: 100%;
  height: 20%;
}
p {
  font-size: 0.07rem;
  margin-bottom: 0.15rem;
  color: #515151;
}
span {
  font-size: 0.15rem;
}
</style>